<template>
    <HeaderBar :title="$t('mine.wallet.title')" />
    <view class="wallet-container main-container">
        <view class="title-wrap">
            <view class="left">
                {{$t('mine.wallet.total')}}
                <wd-icon
                    :name="showMoney ? 'browse' : 'browse-off'"
                    size="36rpx"
                    @click="showMoney = !showMoney"
                ></wd-icon>
            </view>
            <view class="right">{{$t('mine.wallet.unit')}}</view>
        </view>
        <view class="money">${{ formatAmount(userInfo.balance - userInfo.freezeBalance) }}</view>
        <view class="money-content">
            <view class="item">
                <view class="name">{{$t('mine.wallet.balance')}}</view>
                <view class="content">${{ showMoney ? formatAmount(userInfo.balance - userInfo.freezeBalance) : '****' }}</view>
            </view>
            <!-- <view class="item">
                <view class="name">To Be Consumed</view>
                <view class="content">${{ showMoney ? '0' : '****' }}</view>
            </view>
            <view class="item">
                <view class="name">To Be Settled</view>
                <view class="content">${{ showMoney ? '0' : '****' }}</view>
            </view>
            -->
        </view>
        <view class="btn-wrap">
            <view class="item" @click="openWithdraw">{{$t('mine.wallet.withdrawBtn')}}</view>
            <view class="item" @click="openDeposit">{{$t('mine.wallet.depositBtn')}}</view>
        </view>
        <view class="link-wrap">
            <view class="item" @click="openPassword">
                <view class="name">
                    <wd-icon name="bags" size="40rpx" />
                    {{$t('mine.wallet.address')}}
                </view>
                <view class="arrow"><wd-icon name="arrow-right" size="36rpx" /></view>
            </view>
            <view class="item" @click="toPage('/pages/mine/wallet/password')">
                <view class="name">
                    <wd-icon name="lock-on" size="44rpx" />
                    {{$t('mine.wallet.transactionPwd')}}
                </view>
                <view class="arrow">
                    <wd-icon name="arrow-right" size="36rpx" />
                </view>
            </view>
        </view>
        <view class="record-wrap">
            <view class="title">{{$t('mine.wallet.details')}}</view>
            <view class="list">
                <view class="item" v-for="(item, index) in recordList" :key="index" @click="openDetail(item)">
                    <view class="name">{{ formatDate(item.createTime) }}</view>
                    <view class="arrow"><wd-icon name="arrow-right" size="36rpx" /></view>
                </view>
            </view>
        </view>
    </view>

    <uni-popup ref="depositRef">
        <Deposit />
    </uni-popup>

    <uni-popup ref="withdrawRef">
        <Withdraw @onClose="onClose" />
    </uni-popup>

    <uni-popup ref="detailRef">
        <RecordDetail :row="row" />
    </uni-popup>

    <uni-popup ref="passwordRef">
        <VerifyPassword />
    </uni-popup>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import HeaderBar from '@/components/HeaderBar/index.vue';
import Deposit from './deposit.vue';
import Withdraw from './withdraw.vue';
import RecordDetail from './recordDetail.vue';
import VerifyPassword from './verifyPassword.vue';
import { toLang } from '@/utils/lang';
import { NavigateTo, setStorage, getStorage, showToast, formatAmount } from '@/utils/common';
import { formatDate } from '@/utils/date';
import { getMemberBalanceList, getBankInfo } from '@/api/mine';
const page = ref<number>(1);
const pageSize = ref<number>(10);
const isEnd = ref<boolean>(false);

const depositRef = ref(null) as any;
const withdrawRef = ref(null) as any;
const detailRef = ref(null) as any;
const passwordRef = ref(null) as any;
const showMoney = ref<boolean>(true);
const recordList = ref([]) as any;
const row = ref({});
const userInfo = ref({}) as any;

onLoad(() => {
    userInfo.value = getStorage('user') || {};
    getBalanceList();
});

//获取明细列表
const getBalanceList = async () => {
    const res = await getMemberBalanceList({ pageNum: page.value, pageSize: pageSize.value });
    if (res.code !== 200) {
        return false;
    }
    const data = res.data.list || [];
    if (data.length < pageSize.value) {
        isEnd.value = true;
    }
    recordList.value = [...recordList.value, ...data];
};

onReachBottom(() => {
    if (!isEnd.value) {
        page.value++;
        getBalanceList();
    }
});

//跳转界面
const toPage = (url: string) => {
    NavigateTo(url);
};

//开启充值弹框
const openDeposit = () => {
    depositRef.value.open('bottom');
};

//开启提现弹框
const openWithdraw = async () => {
    const res = await getBankInfo();
    if (res.code !== 200) return false;
    if (!res.data) {
        showToast({ title: toLang('mine.wallet.verifyBank') });
        return;
    }
    setStorage('bankInfo', res.data);
    withdrawRef.value.open('bottom');
};

//开启提现记录详情
const openDetail = (item: any) => {
    row.value = item;
    detailRef.value.open('bottom');
};

//开启提现记录详情
const openPassword = () => {
   // passwordRef.value.open('bottom');
   NavigateTo('/pages/mine/wallet/setting');
};

//关闭弹窗
const onClose = () => {
    withdrawRef.value.close();
    userInfo.value = getStorage('user') || {};
    getBalanceList();
};
</script>

<style lang="scss">
.wallet-container {
    padding: 0 30rpx;
    .title-wrap {
        display: flex;
        justify-content: space-between;
        height: 80rpx;
        align-items: center;
        .left {
            font-size: 36rpx;
        }
        .right {
            font-size: 24rpx;
        }
    }
    .money {
        font-size: 62rpx;
        font-weight: 600;
        margin-top: 10rpx;
    }
    .money-content {
        margin-top: 40rpx;
        background: #f0f2f5;
        border-radius: 20rpx;
        padding: 20rpx 30rpx;
        .item {
            display: flex;
            height: 68rpx;
            align-items: center;
            justify-content: space-between;
            font-size: 24rpx;
        }
    }
    .btn-wrap {
        margin-top: 40rpx;
        display: flex;
        justify-content: space-between;
        .item {
            width: calc(50% - 15rpx);
            display: flex;
            align-items: center;
            justify-content: center;
            height: 88rpx;
            border: solid 1rpx #0866ff;
            color: #0866ff;
            font-size: 28rpx;
            border-radius: 100rpx;
            cursor: pointer;
            &:last-child {
                background: #0866ff;
                color: #fff;
            }
            &:active {
                opacity: 0.6;
            }
        }
    }
    .link-wrap {
        margin-top: 40rpx;
        padding-top: 30rpx;
        border-top: solid 1rpx #e5e5e5;
        .item {
            display: flex;
            justify-content: space-between;
            height: 88rpx;
            align-items: center;
            font-size: 32rpx;
            .wd-icon {
                margin-right: 10rpx;
            }
        }
    }
    .record-wrap {
        border-top: solid 10rpx #f0f2f5;
        margin-top: 20rpx;
        .title {
            padding: 40rpx 0;
            border-bottom: solid 1rpx #e5e5e5;
            font-size: 34rpx;
        }
        .list {
            .item {
                display: flex;
                justify-content: space-between;
                height: 120rpx;
                align-items: center;
                font-size: 24rpx;
                border-bottom: solid 1rpx #e5e5e5;
            }
        }
    }
}
</style>
